<template>
  <el-form label-width="70px" :model="formData" :rules="rules" label-position="left" size="small">
    <el-form-item label="对齐方式" prop="labelPosition">
      <el-radio-group v-model="formData!.labelPosition">
        <el-radio-button label="左对齐" value="left" />
        <el-radio-button label="右对齐" value="right" />
        <el-radio-button label="顶部对齐" value="top" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签宽度" prop="labelPosition">
      <el-input-number
        v-model="formData!.labelWidth"
        :min="0"
        :max="1000"
        controls-position="right"
      />
      <span class="ml-10px">px</span>
    </el-form-item>
    <el-form-item label="尺寸" prop="size">
      <el-radio-group v-model="formData!.size">
        <el-radio-button label="大" value="large" />
        <el-radio-button label="中" value="default" />
        <el-radio-button label="小" value="small" />
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { FormConfigBaseForm } from './config'
import { usePropertyForm } from '../index'

const props = defineProps<{ modelValue: FormConfigBaseForm }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
// 表单校验
const rules = {}
</script>
